<template lang="html">
  <div class="panel-order">
    <div class="head">
      <h4>我的评价</h4>
      <div class="header-title fr comments-tips" @click="handleAttention()">
        评价需知
        <img src="../../../assets/images/member/comment_ico03.png">
      </div>
    </div>
    <div class="body">
      <div class="table-body table-info" v-loading="loading" v-if="orderEvaluationList.length">
        <div class="item" v-for="(item, index) in orderEvaluationList">
          <div class="hd">
            <div class="time">订单编号：<span>{{ item.orderNo }}</span></div>
            <div class="storeName"><span @click="routeToPath('/factory?factoryId='+item.factoryId)">{{ item.factoryName }}</span><img src="@/assets/images/cart/cart_01.png" @click="handleChat()"/></div>
          </div>
          <div class="bd">

            <ul class="order-product-list">
              <li v-for="(panel, i) in item.orderEvaluationItemDTOList">
                <div class="order-info">

                  <div class="info">
                    <img :src="URL.PIC + panel.productPic" @click="routeToPath('/product/detail?id='+panel.productId)"/>
                    <div class="left">
                      <div class="title" @click="routeToPath('/product/detail?id='+panel.productId)">{{ panel.productName }}</div>
                    </div>
                  </div>


                </div>
                <div class="order-consignee">
                  <div class="consignee">{{ panel.isEvaluation == 0 ? '' : panel.evaluationStatus == 0 ? '' : panel.evaluationTime }} {{ panel.isEvaluation == 0 ? '未评价' : panel.evaluationStatus == 0 ? '已删除' : '已评价' }}</div>
                </div>
                <div class="order-status">

                  <router-link v-if="panel.isEvaluation == 0" :to="{name:'Comments', query:{orderId:item.id, productId:panel.productId, productPic:encodeURIComponent(panel.productPic), productName:panel.productName, specifications:panel.specifications, productSpecificationId:panel.productSpecificationId}}">评价</router-link>

                  <router-link v-if="panel.isEvaluation == 1 && panel.evaluationStatus == 1" :to="{name:'CommentsDetail', query:{ evaluationId: panel.evaluationId, productId:panel.productId, productPic:encodeURIComponent(panel.productPic), productName:panel.productName}}">查看评价</router-link>

                  <span v-if="panel.isEvaluation == 1 && panel.evaluationStatus == 0">已删除</span>
                  <a href="javascript:;" v-if="panel.isEvaluation == 1 && panel.evaluationStatus == 1" @click="deleteEvaluation(panel.evaluationId)">删除评价</a>

                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="order-nodata" v-else>
        <img src="@/assets/images/member/notorder.png" />
        <p>暂时还没有评价哦~</p>
      </div>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="size" @pagination="getEvaluationList" />
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { getOrderEvaluationList, getEvaluationList, deleteEvaluation } from '@/api/order'
  export default {
    name: 'MemberOrderComments',
    components: {
      Pagination
    },
    data() {
      return{
        loading: true,
        orderStatusText: [
          {
            'title':'全部订单',
            'nums': 0
          },
          {
            'title':'待付款',
            'nums': 0
          },
          {
            'title':'待发货',
            'nums': 0
          },
          {
            'title':'待收货',
            'nums': 0
          },
          {
            'title':'待评价',
            'nums': 0
          }
        ],
        orderEvaluationList: [],
        page: 1,
        size: 10,
        total: 0
      }
    },
    created() {
      this.getEvaluationList();
    },
    methods: {
      handleChat() {
        this.$message({
          message: '供应商暂未开启客服功能',
          type: 'warning'
        });
      },
      handleAttention() {
      const h = this.$createElement;
      this.$msgbox({
        title: '评价须知',
        customClass: 'sales-msgbox',
        message: h('p', null, [
          h('p', { style: 'color: #999' }, '1. 您的评价将影响到卖家的好评率。请您根据实际交易情况，给予真实客观的评价。'),
          h('p', { style: 'color: #999' }, '2. 确认收货后的15天内，您可以对此次交易进行评价，超过15天未评价将默认好评。'),
          h('p', { style: 'color: #999' }, '3. 评价后的30天内，您有一次机会删除给卖家的评价，且可追加评价对该次交易重新进行评价。超出30天后，不可再追加评价。'),
          h('p', { style: 'color: #999' }, '4. 每次交易仅可追加一次评价。')
        ]),
        showCancelButton: false,
        showConfirmButton: false
      }).then(() => {

      }).catch(() => {

      });
    },
      //获取订单列表
      getEvaluationList() {
        this.loading = true
        const params = {
          "size": this.size,
          "page": this.page,
          "orderStatus": '4,5'
        }
        getEvaluationList(params).then(res => {
          if(res.code == 200){
            this.orderEvaluationList = res.data.list
            this.total = res.data.total
            setTimeout(() => {
              this.loading = false
            }, 300)
          }
        })
      },

      deleteEvaluation(evaluationId){
        const params = {
          id: evaluationId
        }
        deleteEvaluation(params).then(res => {
          if(res.code == 200){
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.getEvaluationList();
          }else{
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/pages/orderCommentsList.scss';

</style>
